<template>
	<view class="index-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="代表行业小组"></uni-navbar></view>

		<view class="index-card">
			<u-row class="card-link" gutter="0" align="top">
				<u-col span="6" v-for="(item, index) of infoList" :key="item.id">
					<view class="link-item" @click="navTo('/pagesA/lxHyxz/group?id=' + item.id)">
						<image class="image" :src="$imagePreview(item.logo)" mode="aspectFill"></image>
						<view class="clamp2">{{ item.name }}</view>
					</view>
				</u-col>
			</u-row>

			<u-loadmore :status="loading" />

			<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			scrollTop: 0,
			id: '',
			detailInfo: {},
			show: false,
			infoList: [],
			info: {
				name: ''
			},
			loading: 'loadmore'
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.loadData();
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onReachBottom() {
		if (this.loading == 'loadmore') this.loadData('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.roleCodes = this.userInfo.roleCodes.join(',');

				this.pageNum = 1;
				this.pageSize = 15;
			} else {
				this.$logout();
			}
		},
		loadData(type = 'add') {
			if (this.loading == 'loading') {
				return false;
			}
			if (type == 'add') {
				if (this.loading == 'nomore') {
					return false;
				}
				this.loading = 'loading';
			} else {
				this.loading = 'loading';
			}
			if (type != 'add') {
				this.pageNum = 1;
			}
			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				currentUserId: this.userId,
				clientCode: this.clientCode,
				roleCodes: this.roleCodes,
				...this.info
			};
			let url = '/minqingzhitong/ms-industry-group/list';

			this.$request(url, data, {
				load: true
			}).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.infoList = [];
				}
				this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
				this.pageNum = this.pageNum + 1;
				this.infoList = this.infoList.concat(res.data.records);
				this.loaded = true;
				if (this.infoList.length <= 0) {
					this.loading = 'nodata';
				}
			});
		},
		filter() {
			this.show = false;
			this.loadData('refresh');
		},
		resert() {
			this.show = false;
			this.info.name = '';
			this.loadData('refresh');
		},
		search(e) {
			this.info.name = e;
			this.loadData('refresh');
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.index-view {
	background-color: #fff;
}

.index-card {
	padding: 20rpx 10rpx;
	background-color: #fff;

	.card-link {
		.image {
			margin: 0 auto 10rpx;
			width: 100%;
			height: 200rpx;
		}

		.link-item {
			margin: 0 20rpx 40rpx;
			font-size: 14px;
			line-height: 40rpx;
			text-align: center;
			word-break: keep-all;
		}
	}
}
</style>
